import { message } from "antd"
import { lazy } from "react"
import { createBrowserRouter, } from "react-router"
import Error from '@/views/error/index.tsx'
const sleep = (time: number) => new Promise((resolve) => setTimeout(resolve, time))

const router = createBrowserRouter([
    {
        path: "/",
        Component: lazy(() => import("@/layout/index.tsx")),
        // 懒加载
        // Component: lazy(() => import("@/views/home/index.tsx")),
        // 不能指向appDemo，否则会报错
        // Component: lazy(() => import("../App.tsx")),

        children: [
            {
                // path: "/home",
                index: true, // 默认路由,不要写Path了，如果设置这个
                // 懒加载
                Component: lazy(() => import("@/views/AppDemo/index.tsx")),
            },
            {
                path: "/home",
                // index: true, // 默认路由,不要写Path了，如果设置这个
                // 懒加载
                Component: lazy(() => import("@/views/AppDemo/index.tsx")),
            },

            {
                path: "/cssDemo",
                Component: lazy(() => import("@/views/cssDemo/index.tsx")),
            },
            {
                path: "/routeLink",
                Component: lazy(() => import("@/views/routeDemo/routeLink/index.tsx")),
            },
            {
                path: '/routeParam/:id', // 动态路由 通过:id来设置参数
                Component: lazy(() => import("@/views/routeDemo/routeParma/index.tsx"))
            },
            {
                path: '/routeQuery', // 动态路由 通过:id来设置参数
                Component: lazy(() => import("@/views/routeDemo/routeQuery/index.tsx"))
            },
            {
                path: '/routeState', // 动态路由 通过:id来设置参数
                Component: lazy(() => import("@/views/routeDemo/routeState/index.tsx"))
            },
            {
                path: '/routeAsync',
                lazy: async () => {
                    // 异步请求
                    await sleep(2000)
                    const Component = await import("@/views/routeDemo/routeAsync/index.tsx")
                    console.log('component==>', Component);
                    return {
                        Component: Component.default
                    }

                }
            },
            {
                path: '/routeGet',
                Component: lazy(() => import("@/views/routeDemo/routeGet/index.tsx")),
                loader: async () => {
                    // 发起请求
                    await sleep(2000)
                    return {
                        data: {
                            name: '张三'
                        },
                        message: '请求成功'
                    }
                }
            },
            {
                path: '/RouteForm',
                Component: lazy(() => import("@/views/routeDemo/routeForm/index.tsx")),
                action: async ({ request }) => {
                    // 发起请求,拿到表单值
                    const formData = await request.formData();
                    // await createUser(formData); 创建用户
                    console.log('formData==>', formData.get('username'));
                    return {
                        data: {
                            name: 'action方式，提交表单,post,put,delete,patch触发'
                        },
                        message: '请求成功'
                    }
                }
            },

            {
                path: '/routeGetError',
                Component: lazy(() => import("@/views/routeDemo/routeGet/index.tsx")),
                loader: async () => {
                    // 发起请求
                    //throw new Response('Not Found', { status: 404, statusText: 'Not Found' }); 可以返回Response对象
                    //也可以返回json等等
                    throw {
                        message: 'Not Found',
                        status: 404,
                        statusText: 'Not Found',
                        data: '132131',
                    }
                },
                ErrorBoundary: Error, //如果loader或action抛出错误，会调用ErrorBoundary组件
            },
            {
                path: '/PriceDemo',
                Component: lazy(() => import("@/views/storeDemo/priceDemo/index.tsx"))
            },
            {
                path: '/immerDemo',
                Component: lazy(() => import("@/views/storeDemo/immerDemo/index.tsx"))
            },
            {
                path: '/immerDemo2',
                Component: lazy(() => import("@/views/storeDemo/immerDemo2/index.tsx"))
            },
            {
                path: '/middleDemo',
                Component: lazy(() => import("@/views/storeDemo/middleDemo/index"))
            },
            {
                path: '/subcribe',
                Component: lazy(() => import("@/views/storeDemo/subcribe/index"))
            }
        ]
    },
    {
        path: "*",
        Component: lazy(() => import("@/views/404/index.tsx"))
    }

])

export default router